<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/moneyManage/classmenage_alert.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/alert.css">
</script>
<style>
  .layui-laydate-content>.layui-laydate-list {
    padding-bottom: 0px;
    overflow: hidden;
  }

  .layui-laydate-content>.layui-laydate-list>li {
    width: 50%
  }

  .merge-box .scrollbox .merge-list {
    padding-bottom: 5px;
  }

  .ClassEdit {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 5px;
  }
</style>

<div class="layui-form row" lay-filter="layuiadmin-form-tags" id="layuiadmin-form-tags">
  <div class="layui-form-item">
    <label class="layui-form-label">班次代码：</label>
    <div class="layui-input-block">
      <input type="text" name="tcShftId" placeholder="项目名称" autocomplete="off" class="layui-input" />
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">班次名称：</label>
    <div class="layui-input-block">
      <input type="text" name="tcShftName" autocomplete="off" class="layui-input" />
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">上班时间：</label>
    <div class="layui-input-block">
      <input type="text" name="startTime" autocomplete="off" class="layui-input" id="tcShftStart2"
        style="cursor:pointer;" />
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">下班时间：</label>
    <div class="layui-input-block">
      <input type="text" name="endTime" autocomplete="off" class="layui-input" id="tcShftEnd2"
        style="cursor:pointer;" />
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">厂房：</label>
    <div class="layui-input-block">
      <select name="tcShftFactory" lay-filter="tcShftFactory" lay-search id="selectThree">
      </select>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">楼层：</label>
    <div class="layui-input-block">
      <select name="tcShftFloor" lay-filter="" lay-search id="selectFour">
      </select>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label ">站别：</label>
    <div class="layui-input-block">
      <select name="tcShftProcess" lay-filter="" lay-search id="selectOne">
        <option value=""></option>
      </select>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">线别:</label>
    <div class="layui-input-block">
      <select name="tcShftLine" lay-filter="" lay-search id="selectTwo">
        <option value=""></option>
      </select>
    </div>
  </div>

  <div class="layui-btn-container">
    <button class="define layui-btn layui-btn-radius layui-btn-primary" lay-filter="layuiadmin-app-form-submit"
      lay-submit>
      确定
    </button>
    <button class="cancel layui-btn layui-btn-radius layui-btn-primary">
      取消
    </button>
  </div>
</div>

<script>
  layui.use(["admin", "form", "user", "api", "table", "utill", "view", "laydate"], function () {
    var table = layui.table,
      form = layui.form,
      setter = layui.setter,
      laytpl = layui.laytpl,
      api = layui.api,
      utill = layui.utill,
      element = layui.element,
      laypage = layui.laypage,
      admin = layui.admin,
      view = layui.view,
      laydate = layui.laydate,
      $ = layui.jquery;
      form.render();
      function dis(obj,doc){
        let val = $(obj).attr('value');
          if(val == null || val == ''){
               $(doc).attr('disabled','disabled')
          }else if(val != null || val != ''){
               $(doc).removeAttr('disabled')
          }
      }

      dis('#selectThree','#selectFour');
    // 楼层
    form.on("select(tcShftFactory)", function (data) {
      let val = data.value;
      var tcFtyId = $("#selectThree").val();
      console.log(tcFtyId,val);
      if(val != null || val != ''){
        dis('#selectThree','#selectFour')
        admin.req({
          url: api.host + api.selectFtyFlr,
          data: { ftyId: tcFtyId },
          type: "get",
          success: function (res) {
            var msg = res.data;
            if (msg != null || msg.size > 0) {
              var _msg = "";
              msg.forEach(item => {
                _msg += `<option value=${item.tcFlrId}>${item.tcFlrName}</option>`;
              });
              $("#selectFour").html(_msg);
              form.render("select");
            }
          }
        });
      }else if(val == null || val == ''){
        dis('#selectThree','#selectFour')
      }
    });

    // 时间组件（上班时间）
    laydate.render({
      elem: '#tcShftStart2'
      , type: 'time'
      , trigger: 'click'
      , format: 'HH:mm'  //保留时分
      , btns: ['confirm', 'clear']
      , ready: formatminutes
    });

    // 下班时间
    laydate.render({
      elem: '#tcShftEnd2'
      , type: 'time'
      , trigger: 'click'
      , format: 'HH:mm'  //保留时分
      , btns: ['confirm', 'clear']
      , ready: formatminutes
    });

    function formatminutes(date) {
      var aa = $(".laydate-time-list li ol")[1];
      var showtime = $($(".laydate-time-list li ol")[1]).find("li");
      for (var i = 0; i < showtime.length; i++) {
        var t00 = showtime[i].innerText;
        if (t00 != "00" && t00 != "20" && t00 != "30" && t00 != "40" && t00 != "50") {
          //分进行过滤 只保留0 10 20 30 40 50 一次性显示六十个太多没必要
          showtime[i].remove()
        }
      }
      $($(".laydate-time-list li ol")[2]).find("li").remove();  //清空秒
    }

    $(".layui-form-item").on("click", ".btn2", function () {
      window.location.reload();
    });
  }
  );
</script>